﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>介绍 - vue.js</title>
		
		<script src="vue.js">
<script type="text/javascript">
<!--
	
//-->
</script>		

    </head>
    <body class="docs"> 

<div id="app">

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<div id="components-demo3" class="demo">
  <button-counter2></button-counter2>
  <button-counter2></button-counter2>
  <button-counter2></button-counter2>
</div>
	
</div>
	
    </body>
	
<script type="text/javascript">
<!--

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
	//data 必须是一个函数
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var app = new Vue({ el: '#components-demo' });
var buttonCounter2Data = {
  count: 0
}
Vue.component('button-counter2', {
  data: function () {
    return buttonCounter2Data
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({ el: '#components-demo3' })

</script>
	
</html>
